<template>
  <div>
    <!-- 内容区域 -->
    <el-main>
      <div class="w">
        <!-- 轮播图 -->
        <el-card class="Carous">
          <el-carousel autoplay
                       trigger="click"
                       height="500px">
            <el-carousel-item class="
                       clearfix"
                              v-for="(item, index) in bannerUrl"
                              :key="index">
              <img :src="item.imgUrl"
                   alt=""
                   class="bannerImg" />
              <img :src="item.imgUrl"
                   alt=""
                   class="bannerImg" />
              <img :src="item.imgUrl"
                   alt=""
                   class="bannerImg" />
            </el-carousel-item>
          </el-carousel>
        </el-card>
        <!-- 新品 -->
        <div class="newShop">
          <ul class="clearfix">
            <li class="new_lis"
                v-for="(o, i) in activeLis"
                :key="i">
              <a href="javascript:;">
                <img :src="o.picUrl"
                     alt="新品" />
              </a>
            </li>
          </ul>
        </div>
        <div v-for="(item, index) in allShopLis"
             :key="index">
          <!-- 热门商品 -->
          <section>
            <hot-title :title="item.name"
                       v-if="item.type === 2">
              <div slot="module">
                <ul class="clearfix hotPics">
                  <li v-for="(i, o) in item.panelContents"
                      :key="o"
                      class="hot_pic">
                    <img :src="i.picUrl"
                         alt=""
                         class="img1" />
                    <h3>{{ i.productName }}</h3>
                    <p class="text">{{ i.subTitle }}</p>
                    <p class="price">￥ {{ i.salePrice }}.00</p>
                    <show-cart class="showCart"></show-cart>
                  </li>
                </ul>
              </div>
            </hot-title>
          </section>
          <!--  官方精选 -->
          <section>
            <hot-title :title="item.name"
                       v-if="item.type === 3">
              <div slot="module">
                <ul class="picItems clearfix">
                  <li class="items"
                      v-for="(a, b) in  item.panelContents"
                      :key="b">
                    <img :src="a.picUrl"
                         alt=""
                         class="picImg" />
                    <h3>{{ a.productName }}</h3>
                    <p class="text">{{ a.subTitle }}</p>
                    <p class="price">￥ {{ a.salePrice }}.00</p>
                    <show-cart class="showCart1"
                               :productId="a.productId"
                               :productPrice="a.salePrice"
                               :productName="a.productName"
                               :productImg='a.productImageBig'></show-cart>
                  </li>
                </ul>
              </div>
            </hot-title>
          </section>
        </div>
      </div>
      <div class="w">
        <section>
          <div class="active2">
            <a href="#"
               class="pic-warp"
               v-for="(q,w) in active2.panelContents"
               :key="w">
              <img v-lazy="q.picUrl"
                   alt="">
            </a>
          </div>
        </section>
      </div>
    </el-main>
    <footer-swap></footer-swap>
  </div>
</template>

<script>
import HotTitle from '@/components/hot-header.vue'
import ShowCart from '@/components/showCart'
import FooterSwap from '../../components/common/footer'
export default {
  components: {
    HotTitle,
    ShowCart,
    FooterSwap
  },
  created() {
    this.getShopMessage()
  },
  data() {
    return {
      // 总数居
      allShopLis: [],
      // 存储活动板块数据
      activeLis: [],
      // 轮播图数据
      bannerUrl: [
        {
          id: '1',
          imgUrl: 'https://ooo.0o0.ooo/2018/11/04/5bdebb109a29a.png'
        },
        {
          id: '2',
          imgUrl: 'https://s1.ax1x.com/2018/05/19/Ccdiid.png'
        },
        {
          id: '3',
          imgUrl: 'https://ooo.0o0.ooo/2019/09/30/9Y5MHc8sfhJLk3u.png'
        }
      ],
      // 活动板块2
      active2: []
    }
  },
  methods: {
    async getShopMessage() {
      const { data: res } = await this.$http.get('/api/goods/home')
      if (res.code === 200) {
        this.allShopLis = res.result
        // 存储活动板块数据
        const activeLis = this.allShopLis.find((item) => item.type === 1)
        this.activeLis = activeLis.panelContents
        this.active2 = this.allShopLis[6]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-main {
  height: 100%;
  background-color: #f5f5f5;
  padding: 0 !important;
  overflow: hidden !important;

  // 轮播图
  .Carous {
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
    height: 500px;

    .el-carousel {
      .bannerImg {
        width: 100%;
        height: 500px;
        background-color: black;
      }
    }
  }

  .el-card__body {
    padding: 0 !important;
  }

  // 新品
  .newShop {
    height: 200px;
    margin: 25px 0 !important;
    border-radius: 10px;
    overflow: hidden;

    ul {
      display: flex;

      li {
        flex: 25%;
        height: 200px;
        border-left: 1px solid #999;
        float: left;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-3px);
          box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3);
        }

        &:nth-child(1) {
          border-left: none;
        }

        a {
          img {
            height: 200px;
          }
        }
      }
    }
  }

  section {
    margin-bottom: 30px !important;
  }

  //热门商品
  .hotPics {
    .showCart {
      display: none;
    }

    .hot_pic {
      width: 50%;
      height: 430px;
      transition: all, 0.3s;
      overflow: hidden;
      float: left;
      text-align: center;

      &:hover {
        box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3);
        transform: translateY(-3px);

        .showCart {
          display: block;
        }

        .price {
          display: none;
        }
      }

      .img1 {
        width: 260px;
        height: 260px;
        margin-top: 40px !important;
      }

      h3 {
        font-size: 16px;
        color: #464646;
        margin-top: 15px !important;
      }

      .text {
        font-size: 10px;
        color: #d0d0d0;
        margin: 15px 0 !important;
      }

      .price {
        font-size: 18px;
        color: red;
        font-weight: 550;
      }
    }
  }

  // 官方精选
  .picItems {
    .items:first-child {
      width: 609px;

      h3,
      .showCart,
      .price,
      .text {
        display: none !important;
      }

      .showCart1 {
        display: none;
      }
    }

    .items:nth-child(n + 2) {
      .showCart1 {
        display: none;
      }

      width: 304px;
      text-align: center;

      &:hover {
        .price {
          display: none;
        }

        .showCart1 {
          display: block;
        }
      }

      .picImg {
        width: 206px;
        height: 206px;
        margin-top: 30px;
      }

      h3 {
        font-size: 18px;
        color: #464646;
        margin-top: 25px;
      }

      .text {
        font-size: 14px;
        color: #d0d0d0;
        margin: 38px 0;
      }

      .price {
        font-size: 18px;
        color: red;
        font-weight: 550;
      }
    }

    .items {
      height: 430px;
      float: left;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3);
      }

      .picImg:first-child {
        width: 100%;
      }
    }
  }

  // 活动板块2
  .active2 {
    width: 100%;

    .pic-warp {
      display: inline-block;
      height: 200px;
      width: 25%;
      transition: all 0.3s;

      &:hover {
        box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.3);
      }

      img {
        width: 100%;
      }
    }
  }
}
</style>
